<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" layout:decorate="~{layout}">
<head>
    <title>Spring Boot管理后台</title>
    <style>
        .logo{
            width: 30px;
            height:30px;
            padding: 0px;
            margin-top: -4px;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            //初始化查询菜单
            // initData();
            $("#menus").on("click", ".changeUrl", function() {
                var id = $(this).attr("id");
                var url = "/"+$(this).attr("value");

                /*<![CDATA[*/
                if(id && url){
                    addTabs({
                        id:id,
                        title:$(this).text(),
                        url:url,
                        close:true
                    });
                }
                /*]]>*/

            });
            $(".nav-tabs").on("click", ".close-tab", function() {
                id = $(this).prev("a").attr("aria-controls");
                closeTab(id);
            });

            $("#mainIframe").load(function(){
                var mainheight =$(this).contents().find("body").height();
                /*<![CDATA[*/
                if(mainheight<400){
                    mainheight = 400;
                }
                /*]]>*/
                $(this).height(mainheight);
            });

            //退出操作
            $("#outLogin").click(function(){
                sessionStorage.clear();
                window.location.href ="/toLogin";
            });
            //
            $("#userConfig").click(function(){
                $("#myModal").modal('show');
            });
        });

        //打开菜单
        function changeUrl(url) {
            clearFlash();
            $("#mainFrame").attr("src","/" + url);
        }
        //清除iframe
        function clearFlash() {
            try {
                //在iframe销毁前清理掉iframe中的内容（特别是flash）
                $("#mainFrame").contents().find("body").empty();
            } catch (e) {
            }
        }
    </script>

</head>
<body>
<div layout:fragment="content" th:remove="tag">
    <div class="navbar navbar-default" id="navbar">
        <div class="navbar-container" id="navbar-container">
            <div class="navbar-header pull-left">
                <a th:href="@{/}"  class="navbar-brand" style="height: 45px;">
                    <small>
                        <img class="logo"  th:src="@{/assets/images/star.ico}" /> 星尘游戏
                    </small>
                </a>
            </div>

            <div class="navbar-header pull-right" role="navigation">
                <ul class="nav ace-nav">
                    <li class="light-blue">
                        <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                            <img class="nav-user-photo" th:src="@{/assets/images/dudu.jpg}" />
                            <span class="user-info">
                            <small>欢迎光临</small>
                            <div th:text="${(#session.getAttribute('user')).username}"></div>
						</span>
                            <i class="icon-caret-down"></i>
                        </a>
                        <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                            <!--<li><a id="userConfig"> <i class="icon-user"></i> 个人资料</a></li>-->
                            <li class="divider"></li>
                            <li><a id="outLogin" > <i class="icon-off"></i>退出</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- /.ace-nav -->
            </div>
            <!-- /.navbar-header -->
        </div>
        <!-- /.container -->
    </div>

    <div class="main-container" id="main-container">

        <div class="main-container-inner">
            <a class="menu-toggler" id="menu-toggler" href="#"> <span class="menu-text"></span></a>
            <div class="sidebar" id="sidebar">
                <ul id="menus" class="nav nav-list">
                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-desktop"></i>
                            <span class="menu-text">游戏</span>
                            <b class="arrow icon-angle-down"></b>
                        </a>
                        <ul class="submenu">
                            <li>
                                <a id="game"  value="game" class="changeUrl">
                                    <i class="icon-double-angle-right"></i>
                                    竞猜游戏
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-cogs"></i>
                            <span class="menu-text">用户管理</span>

                            <b class="arrow icon-angle-down"></b>
                        </a>

                        <ul class="submenu">
                            <li>
                                <a id="manage"  value="manage" class="changeUrl">
                                    <i class="icon-double-angle-right"></i>
                                   账户管理
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-cogs"></i>
                            <span class="menu-text">食品溯源</span>

                            <b class="arrow icon-angle-down"></b>
                        </a>

                        <ul class="submenu">
                            <li>
                                <a id="fabric"  value="fabric" class="changeUrl">
                                    <i class="icon-double-angle-right"></i>
                                    食品溯源
                                </a>
                            </li>
                        </ul>
                    </li>


                </ul>
                <div class="sidebar-collapse" id="sidebar-collapse">
                    <i class="icon-double-angle-left"
                       data-icon1="icon-double-angle-left"
                       data-icon2="icon-double-angle-right"></i>
                </div>
            </div>
            <div class="main-content">
                <ul class="nav nav-tabs" role="tablist" style="height:34px">
                    <li role="presentation" class="active" style="margin-right: 4px;">
                        <a href="#home" aria-controls="home" role="tab" data-toggle="tab"><i class="icon-home home-icon"></i>首页</a>
                    </li>
                </ul>
                <div class="tab-content page-content" style="margin-right: 5px;">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <iframe id="mainIframe" th:src="@{/first}" scrolling="no" frameborder="0" width="100%" style="border: 0;height:200px"></iframe>
                    </div>
                </div>
            </div>

            <!-- /.main-content -->
            <div class="ace-settings-container" id="ace-settings-container">
                <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
                    <i class="icon-cog bigger-150"></i>
                </div>
                <div class="ace-settings-box" id="ace-settings-box">
                    <div>
                        <div class="pull-left">
                            <select id="skin-colorpicker" class="hide">
                                <option data-skin="default" value="#438EB9">#438EB9</option>
                                <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                                <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                                <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                            </select>
                        </div>
                        <span>&nbsp; 选择皮肤</span>
                    </div>
                    <div>
                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" /> <label class="lbl" for="ace-settings-navbar"> 固定导航条</label>
                    </div>
                    <div>
                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar"/> <label class="lbl" for="ace-settings-sidebar"> 固定滑动条</label>
                    </div>
                    <div>
                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" /> <label class="lbl" for="ace-settings-breadcrumbs">固定面包屑</label>
                    </div>
                    <div>
                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" /> <label class="lbl" for="ace-settings-rtl">切换到左边</label>
                    </div>
                    <div>
                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" /> <label class="lbl" for="ace-settings-add-container">切换窄屏<b></b></label>
                    </div>
                </div>
            </div>
            <!-- /#ace-settings-container -->
        </div>
        <!-- /.main-container-inner -->
        <!--
        <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
            <i class="icon-double-angle-up icon-only bigger-110"></i>
        </a>
         -->
    </div>
    <!-- /.main-container -->
    <!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">-->
        <!--<div class="modal-dialog" style="width: auto">-->
            <!--<div class="modal-content">-->
                <!--<div class="modal-header">-->
                    <!--<button type="button" class="close" data-dismiss="modal"-->
                            <!--aria-hidden="true">×-->
                    <!--</button>-->
                    <!--<h4 class="modal-title" id="myModalLabel">-->
                        <!--个人资料-->
                    <!--</h4>-->
                <!--</div>-->
                <!--<div class="modal-body">-->
                    <!--用户名:<br/>-->
                    <!--<p th:text="${(#session.getAttribute('user')).username}"></p>-->
                    <!--余额:<br/>-->
                    <!--<p th:text="${(#session.getAttribute('user')).money}"></p>-->
                    <!--钱包地址<br/>-->
                    <!--<p th:text="${(#session.getAttribute('user')).walletAddress}"></p>-->
                <!--</div>-->
                <!--<div class="modal-footer">-->
                    <!--<button type="button" class="btn btn-default"-->
                            <!--data-dismiss="modal">关闭-->
                    <!--</button>-->
                <!--</div>-->
            <!--</div>&lt;!&ndash; /.modal-content &ndash;&gt;-->
        <!--</div>&lt;!&ndash; /.modal-dialog &ndash;&gt;-->
    <!--</div>&lt;!&ndash; /.modal &ndash;&gt;-->

</div>

<div layout:fragment="js" th:remove="tag">

</div>

</body>
</html>